<template>
    <view class="easy-cell-item">
        <uni-icons v-if="showIcon" class="icon" :type="icon"></uni-icons>
        <text class="label">{{ label }}</text>
        <text class="value"></text>
        <switch class="switch" @change="change" :checked="checked" v-model="checked"></switch>
    </view>
</template>

<script>
export default {
    props: {
        icon: {
            type: String,
            default: "",
        },
        label: {
            type: String,
            default: "",
        },
        value: {
            type: Boolean,
            default: true,
        },
        showIcon: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            checked: false,
        }
    },
    watch: {
        value(e) {
            this.checked = e
        },
    },
    mounted() {
        this.checked = this.value
    },
    methods: {
        change(e) {
            this.checked = e.detail.value
            this.$emit("changeSwitch", this.checked)
        },
        getChecked() {
            return this.checked
        },
    },
}
</script>

<style lang="scss">
.easy-cell-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 55rpx;
    padding: $app-page-padding;
    background: $color-white;
    border-bottom: solid 1rpx $border;
    .icon {
        margin-right: 20rpx;
    }
    .label {
        font-size: $font-size-30;
    }
    .value {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        color: $app-color-text-tip;
    }
    .icon-arrow-right {
        margin-left: 20rpx;
    }
}
</style>
